iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 23
0
Data Technology

職場老鳥的資料科學初體驗-R語言專案實作紀錄系列 第 23

(Day23)用Shiny套件打造互動式資料視覺化網站-(上)

  • 分享至 

  • xImage
  •  

Shiny套件,是以R語言為主要開發工具之下,提供快速建置互動式網頁與專業Dashboard的好用工具。
不僅免費,還能快速地發布到網站上。也提供各式專業應用廣泛的視覺化套件,也完整支援R的所有報表套件結果。
再這部分,將按官方Quick Start的分法,分三個部分進行介紹,之後補上一個專案來當作範例!
本篇將就:

  1. Shiny APP 建置
  2. 建立互動
  3. APP發布

1.Template與準備工作

當然請安裝套件先。
install.packages("shiny")
然後來牛刀小試一下!

library(shiny)
ui <- fluidPage("Hello World")
server <- function(input, output) {}
shinyApp(ui = ui, server = server)

結果:
https://ithelp.ithome.com.tw/upload/images/20180107/20107033O0u7SPi3js.png
Shiny 的結構就是由UI/Server 兩個部分組成,再透過shiny APP將前後端程式串起。(後面會補充)

2.UI

UI 的部分,主要是處以前台介面的部分,包括使用者操作資料的輸入、點選,以及最終互動後的結果顯示,都是在UI的部分進行設計,進階的甚至是Shiny提供了頁面設計的一些文件,讓整體的站台與畫面,在編排或是內容設計上,更佳的豐富與更好的使用者體驗。
整理歸納出來,UI互動的部分包括:

  • Input接收輸入參數的多個函數,這部分要的命名部分,將對應Server承接處理的作業(按鈕/輸入/選單/拉bar等)
  • Output將負責呈顯Server處理過的資料,以物件的方式承接並呈現出結果(圖/表/文字/影像等物件處理)
    請參考:
    https://ithelp.ithome.com.tw/upload/images/20180110/20107033837x7tUKAP.png

本例將是以sliderInput當作資料輸入源為例(Server未處理)
(注意本段作業位置,在FluidPage()之中,如有其他Pannel/Layer等,再視作業放到對應正確的位置)

library(shiny)
ui <- fluidPage(
  sliderInput(inputId = "num",
              label = "Choose a number",
              value = 25, min = 1, max = 100),
     plotOutput("hist")
   )
   server <- function(input, output) {}
shinyApp(ui = ui, server = server)

3.Server

Shiny Server端程式流程處理,最主要遵守三個重要原則。

  1. 將預計提供顯示用的資料,儲存為物件格式 (Save the output that you build to output$)
    • 這部分要注意的是物件將與UI的Output的部分有所呼應 (例:output$hist 呼應 plotOutput("hist"))
  2. 利用render相關的函數,來建置物件 (Build objects to display with render*())
    • 舉例來說 output$hist <- renderPlot({hist(rnorm(100))}),output$hist 所有物件所需的處理都用renderPlot()函數來處理。
  3. 使用 input$ 來接受來自UI的輸入異動 (Access input values with input$)
    • 舉例來說 output$hist <- renderPlot({
      hist(rnorm(input$num))
      }) 用的就是 input$num將user操作UI的結果傳入函數進行運算。

https://ithelp.ithome.com.tw/upload/images/20180110/20107033dnAhYZXKZj.png

library(shiny)
ui <- fluidPage(
  sliderInput(inputId = "num",
              label = "Choose a number",
              value = 25, min = 1, max = 100),
  plotOutput("hist")
    )

server <- function(input, output) {
  output$hist <- renderPlot({
    hist(rnorm(input$num))
  })
}
shinyApp(ui = ui, server = server)

https://ithelp.ithome.com.tw/upload/images/20180107/20107033TRysIlA1rK.png

4.Shiny APP發布

Shiny 存檔

  • 單一目錄下,將所有APP所需的物件備齊:
    • 將UI/Server兩部份,寫入同一份名稱限定為app.R 的檔案.
      (該檔案最後一行為~~ shinyApp(ui = ui, server = server)~~,用以叫用ShinyAPP.)
    • 其他資料為datasets, images, css, helper scripts 等等.
  • 單一目錄,放入名稱限定為UI.R與Server.R的兩個檔案.
  • 發布重點: 有自帶的資料來源 如 CSV。

本篇小結:
https://ithelp.ithome.com.tw/upload/images/20180110/20107033z9aIYsofVP.png

參考資料

From Offical:shiny-QuickStart-1
shiny tutorial


上一篇
(Day22)networkD3套件實作
下一篇
(Day24)用Shiny套件打造互動式資料視覺化網站(中)-Reactive觸發與回應作業
系列文
職場老鳥的資料科學初體驗-R語言專案實作紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言